/**
 * Created with hong.rong
 * Date:2020/07/29
 */

import React from 'react'
import { Radio, Col, Row, Input, InputNumber, Form, DatePicker } from 'antd'
import DCTitle from '@/pages/components/DCTitle'
import DCEditor from '@/pages/components/DCEditor'
import Upload from './Upload'

const { RangePicker } = DatePicker
const labelWidth = 110
const gutter = 16

export default function SubmitForm({ form }) {
  return (
    <Form labelAlign="left" form={form}>
      <DCTitle title="基本信息">
        <div className="pv-20">
          <Row gutter={gutter}>
            <Col span={12}>
              <Form.Item
                label="团购标题"
                name="title"
                rules={[{ required: true }]}
                qql-form-label-width={labelWidth}
              >
                <Input placeholder="请输入" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="团购ID"
                name="id"
                rules={[{ required: true }]}
                qql-form-label-width={labelWidth}
              >
                <Input placeholder="请输入" />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={gutter}>
            <Col span={24}>
              <Form.Item
                label="商品图片"
                name="img"
                rules={[{ required: true }]}
                qql-form-label-width={labelWidth}
                extra="建议尺寸：800*800像素，拖拽图片可以调整顺序，最多上次5张"
              >
                <Upload />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={gutter}>
            <Col span={12}>
              <Form.Item
                label="库存"
                name="invent"
                rules={[{ required: true }]}
                qql-form-label-width={labelWidth}
              >
                <InputNumber
                  style={{ width: '100%' }}
                  placeholder="请输入"
                  precision={0}
                  min={0}
                />
              </Form.Item>
            </Col>
          </Row>
        </div>
      </DCTitle>
      <DCTitle title="型号/价格">
        <div className="pv-20">
          <Row gutter={gutter}>
            <Col span={12}>
              <Form.Item
                label="商品型号"
                name="specification"
                rules={[{ required: true }]}
                qql-form-label-width={labelWidth}
              >
                <Input placeholder="请输入" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="商品价格"
                name="sellingPrice"
                rules={[{ required: true }]}
                qql-form-label-width={labelWidth}
              >
                <InputNumber
                  style={{ width: '100%' }}
                  placeholder="请输入"
                  precision={2}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="商品库存"
                name="productInvent"
                rules={[{ required: true }]}
                qql-form-label-width={labelWidth}
              >
                <InputNumber
                  style={{ width: '100%' }}
                  placeholder="请输入"
                  precision={0}
                  min={0}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="成本价"
                name="costPrice"
                // rules={[{ required: true }]}
                qql-form-label-width={labelWidth}
                extra="成本价可用于财务成本核算、经营分析等，卖家不可见。"
              >
                <InputNumber
                  style={{ width: '100%' }}
                  placeholder="请输入"
                  precision={2}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="原价"
                name="costPrice"
                rules={[{ required: true }]}
                qql-form-label-width={labelWidth}
              >
                <InputNumber
                  style={{ width: '100%' }}
                  placeholder="请输入"
                  precision={2}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="划线价"
                name="lineThroughPrice"
                // rules={[{ required: true }]}
                qql-form-label-width={labelWidth}
                extra="设置后，划线价在商品详情以划线形式显示。"
              >
                <InputNumber
                  style={{ width: '100%' }}
                  placeholder="请输入"
                  precision={2}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="佣金" qql-form-label-width={labelWidth}>
                <div className="ub ub-row ub-ac">
                  <Form.Item
                    noStyle
                    className="flex-1"
                    name="commission"
                    rules={[{ required: true, message: '请填写佣金' }]}
                    // qql-form-label-width={0}
                    extra="设置后，佣金百分比为最终销售价（划线价）的占比，"
                  >
                    <InputNumber
                      style={{ width: '100%' }}
                      placeholder="请输入"
                      precision={2}
                    />
                  </Form.Item>
                  <span className="ml-3">%</span>
                </div>
              </Form.Item>
            </Col>
          </Row>
        </div>
      </DCTitle>
      <DCTitle title="物流配送">
        <div className="pv-20">
          <Row gutter={gutter}>
            <Col span={12}>
              <Form.Item
                label="配送方式"
                name="postWay"
                rules={[{ required: true }]}
                qql-form-label-width={labelWidth}
                initialValue={0}
              >
                <Radio.Group>
                  <Radio value={0}>到店自提</Radio>
                  <Radio value={1}>同城配送</Radio>
                </Radio.Group>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="预计送达时间"
                name="arrivedTime"
                rules={[{ required: true }]}
                qql-form-label-width={labelWidth}
              >
                <RangePicker />
              </Form.Item>
            </Col>
          </Row>
        </div>
      </DCTitle>
      <DCTitle title="商品详情">
        <div className="pv-20">
          <Form.Item
            label="商品详情"
            name="detail"
            rules={[{ required: true }]}
            qql-form-label-width={0}
          >
            <DCEditor />
          </Form.Item>
        </div>
      </DCTitle>
    </Form>
  )
}
